<template>
    <div class="res">
        <div class="res_code">
            <input type="text" v-model="mobile">
            <span @click="code">{{codeold}}</span>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            codeold:'获取验证码',
            send:61,
            mobile:null
        }
    },
    methods:{
        code(){
            var that = this;            

            var time = that.timer.gettime();
            var appkey = that.timer.globalData();

            that.$http.get('verifyCode',{
                sign:`${appkey}mobile=${that.mobile}timestamp=${time}`,
                timestamp:time,
                mobile:that.mobile
            }).then( (res) => {
                 that.down();
                console.log(res)
            }).catch(function(res) {
                console.log(res);
            });
        },
        down(){
            var that = this;
            if(that.send === 0){
                console.log('失败');
                that.codeold = "重新获取验证码";
                that.send = 61;
                return false;
            }
            else{
                that.send--;
                that.codeold = that.send + 's';
            }
            //console.log(that.send)
            setTimeout(function(){
                that.code();
            },1000);
        }
    }
}
</script>>

<style scoped>

.res_code{
    display: flex;
    margin: 30px 20px;
    background: #e0e0e0;
    height:35px;
    border-radius:15px;
}
.res_code input{
    background:#e0e0e0;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    border: none;
    outline: none;
}
.res_code span{
    height:25px;
    line-height:25px;
    margin-top:6px;
    width:70px;
    text-align: center;
    background:black;
    color: white;
    font-size:12px;
    border-radius: 25px;

}

</style>